<template>
	<div>
		<nav aria-label="Page navigation">
		  <ul class="pagination">
		    <li>
		      <a class="handable" v-if='localPageNum > 1' aria-label="Previous" @click.prevent='jumpPage(localPageNum - 1)'>
		        <span aria-hidden="true">&laquo;</span>
		      </a>
		      <a v-else aria-label="Previous" disable="true" onclick="return false">
		        <span aria-hidden="true">&laquo;</span>
		      </a>
		    </li>
		    <template v-for='i in (right - left + 1)'>
			    <li class="handable" v-if='(left + i -1) !== localPageNum'><a @click.prevent='jumpPage(left + i - 1)'>{{left + i - 1}}</a></li>
				<li v-else><a style="color:red">{{left + i - 1}}</a></li>
			</template>
		    <li>
		      <a class="handable" v-if='localPageNum < totalPage' aria-label="Next" @click.prevent='jumpPage(localPageNum + 1)'>
		        <span aria-hidden="true">&raquo;</span>
		      </a>
		      <a v-else aria-label="Next" onclick="return false">
		        <span aria-hidden="true">&raquo;</span>
		      </a>
		    </li>

		    <span v-show='showTotalPage' class="span-footer" style="margin-left:50px">共 {{totalPage}} 页</span>
		    <template v-if='showQuickJump'>
			    <span class="span-footer" style="margin-left:25px">跳到</span>
			    <input v-model='inputPageNum' class="input-footer" type="text" name="inputPageNum" @keyup.enter="jumpPage(inputPageNum)">
			    <span class="span-footer">页</span>
			    <button type="submit" class="btn btn-default" style="margin-left:15px" @click.prevent='jumpPage(inputPageNum)'>确定</button>
		    </template>
		  </ul>


		</nav>

		{{result}}
	</div>
</template>
<script type="text/javascript">
	import axios from 'axios'
	export default{
		data() {
			return {
				result: '',
				localPageNum:'',
				inputPageNum:''
			}
		},
		props: {
			//是否显示总页码
			showTotalPage: {
				type: Boolean,
				default: true
			},
			//是否显示快捷跳转
			showQuickJump: {
				type: Boolean,
				default: true
			},
			//每页显示的数量
			pageSize: {
				type: Number,
				default: 10, 
			},
			//当前页码
			pageNum: {
				type: Number,
				default: 1,
			},
			//总页码
			totalPage: {
				type: Number
			},
			//获取指定页码内容的url模板
			descUrl: {
				type: String
			}

		},
		created() {
			var half = this.pageSize / 2
			
			this.localPageNum = this.pageNum
			var tmpLeft = this.localPageNum - half
			if (tmpLeft < 1) {
				tmpLeft = 1
			}
			this.left = tmpLeft

			if (this.pageSize % 2 === 0) {
				var tmpRight = this.localPageNum + half + 1
			}
			if (tmpRight > this.totalPage) {
				tmpRight = this.totalPage
			}
			this.right = tmpRight
			
		},
		computed: {
			left() {
				var half = this.pageSize / 2
				var tmpLeft = this.localPageNum - half
				if (tmpLeft < 1) {
					tmpLeft = 1
				}
				return tmpLeft

			},
			right() {
				var half = this.pageSize / 2
				if (this.pageSize % 2 === 0) {
				var tmpRight = this.localPageNum + half + 1
				}
				if (tmpRight > this.totalPage) {
					tmpRight = this.totalPage
				}
				return tmpRight
			}
		},
		methods: {
			jumpPage(pageNum){
				var that = this
				var r = /^\+?[1-9][0-9]*$/;　　//正整数  
				var isPositiveNumber = r.test(pageNum); 
				console.log(isPositiveNumber)
				if (!isPositiveNumber) return

				this.localPageNum = parseInt(pageNum)

				var pattern = /{\s*pageNum\s*}/g
				var url = this.descUrl.replace(pattern, this.localPageNum)
				axios.get(url)
				  .then(function (response) {

				    that.result = response.data.result
				    that.$emit("listenToPagingChildEvent", that.result)
				  })
				  .catch(function (error) {
				    console.log(error);
				  });				
			}
		}
	}


</script>
<style type="text/css">
	.handable {
		cursor: pointer
	}
	.span-footer {
		line-height: 30px;
		/*padding: 0 30px 30px 0;*/
/*		margin-left: 25px*/
	}
	.input-footer {
		width: 20px
	}
</style>
